<template>
  <div id="app">
    <!-- <table cellspacing=1>
      <thead>
        <th v-for="(item,index) in th" :key="index">{{item}}</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in td" :key="index">
          <td v-for="(v,k) in item" :key="k">{{v}}</td>
        </tr>
      </tbody>
    </table>-->
    <ul class="tab">
      <li
        v-for="(item,index) in tab"
        :key="index"
        :class="[tabI==index?'active':'']"
        @click="tabI=index"
      >{{item.title}}</li>
    </ul>
    <div class="tabcon">
      <div
        v-for="(item,index) in tab" 
        :key="index"
        :class="[tabI==index?'active':'']"
      >{{item.con}}</div>
    </div>
    <hr>
    <Picture/>
  </div>
</template>

<script>
import Picture from './components/Picture'
export default {
  name: "app",
  data() {
    return {
      th: ["姓名", "年龄", "性别"],
      td: [["张三", 20, "男"], ["李四", 21, "男"], ["王五", 22, "男"]],
      tab: [
        { title: "a", con: 1 },
        { title: "b", con: 2 },
        { title: "c", con: 3 },
        { title: "d", con: 4 }
      ],
      tabI: 0
    };
  },
  components:{
    Picture
  }
};
</script>

<style>
#app {
  margin-top: 60px;
}
table {
  background-color: #000;
}
td,
th {
  background-color: #fff;
}
.tab {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.tab li{
  background-color: #ccc;
  padding: 10px 30px;
}
.tab li.active{
  background-color: red;
  color: #fff;
}
.tabcon>div{
  display: none;
}
.tabcon>div.active{
  display: block;
}
</style>
